<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="https://unpkg.com/vue"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <title>个人中心</title>
</head>
<body>
     <header>
        <h4>个人中心</h4>
    </header>

    <!--内容  -->
    <section id="app" >
        <!--已经登录  -->
        <div class="ge_xin pad" v-if='isHiden' >
            <!--头像  -->
            <div class="ge_tou">
                 <img src='img/1.png'>
                <h5 class="ge_name">{{huabi.username}}</h5>

                <button @click='tui'>
                    退出登录
                </button>
            </div>
            <!--额度  -->
            <ul class="ge_money">
                <li>
                    <h5>可用牛牛币</h5>
                    <span>{{huabi.money}}</span>
                </li>
                <li>
                    <button class="ge_chong" @click='chong'>充值</button>
                </li>
                <div class="clear"></div>
            </ul>    
        </div>  

        <!--未登录  -->
        <div class="ge_xin pad"  v-If="isShow">
            <!--头像-->
            <!--<button (click)='deng()'>登录</button>-->
            <div class="ge_tou">

                <img src='img/1.png'>
                <h5 class="ge_name" @click.stop.prevent='tui'>请登录</h5>
            </div>
        </div>
        <!--总盈亏-->
        <div class="ge_ying">
            <h4>总盈亏：<span class="ying_date" >{{huabi.ying}}</span></h4>
            <!--胜负率-->
            <div class="dao_kan">
                <div class="kan_cont1">
                    <div class="kan_left  lefts">
                       <h5>胜</h5><span>{{huabi.sheng}}</span>
                    </div>
                    <hr class="kan_height red">
                </div>
                <p class="dao_vs">
                    <span class="sheng_date">{{huabi.lv}}%</span>胜率
                </p>
                <div class="kan_cont2">
                    <hr class="right_height reds">
                    <div class="kan_right rights">
                        <h5>负</h5><span>{{huabi.fu}}</span>
                    </div>
                </div>
            </div>
            
            <!--收盘和开盘  -->
            <ul class="about_date_pan">
                <li class="libei" @click='closes'>猜收盘</li><li @click='open'>猜开盘</li>
            </ul>
            <!--收盘  -->
            <div class="icon_shou" v-if='isShou' v-for="k in data_items">
                  <p>您买入{{k.CHupordown}} {{k.money}}牛牛币 <span class="chwin">{{k.CHwin}}</span></p>
            </div>  
            <!--开盘  -->
            <div class="icon_kai" v-if='isKai' v-for="k in data_itemk">
                 <p>您买入{{k.CHupordown}} {{k.money}}牛牛币 <span class="chwins" >{{k.CHwin}}</span></p>
      
            </div>

        </div>        
           
    </section>

     <!--底部导航  -->
    <footer>
         <a href="home.html">首页</a>   
         <a href="yiyuan.html">0元夺宝</a>  
         <a href="dhzq.html">兑换专区</a>  
         <a href="about.html">个人中心</a>  
    </footer>
</body>

 <script src="js/shuju.js"></script> 
<script>
    $(".about_date_pan li").click(function(){
        $(this).addClass("libei").siblings().removeClass("libei");
    });
</script>
</html>
